<template>
    <div class="songDetail">
        <div class="songImg" @click="getAllLyric">
            <img :src="musicPlay2.img" alt="">
        </div>
        <div class="songDetail2">
            <div class="songtitle">
                {{ musicPlay2.audioName }}
            </div>
            <ul>
                <!-- 未收藏 -->
                <li v-show="musicPlay2.audioLove == 0">
                    <svg fill="#000000" height="20px" width="20px" version="1.1" id="Layer_1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"
                        xml:space="preserve">
                        <g>
                            <g>
                                <path d="M365.714,3.47c-42.487,0-82.143,18.18-109.714,49.502C228.428,21.65,188.772,3.47,146.286,3.47
			C65.624,3.47,0,69.094,0,149.756c0,33.752,11.776,66.69,33.157,92.744L256,508.53l222.743-265.909l0.1-0.121
			C500.224,216.445,512,183.508,512,149.756C512,69.094,446.376,3.47,365.714,3.47z M454.661,222.553L256,459.713L57.339,222.553
			c-16.762-20.454-25.992-46.303-25.992-72.797c0-63.377,51.562-114.939,114.939-114.939c39.149,0,75.245,19.652,96.558,52.57
			L256,107.708l13.156-20.321c21.313-32.917,57.409-52.57,96.558-52.57c63.377,0,114.939,51.562,114.939,114.939
			C480.653,176.25,471.423,202.099,454.661,222.553z" />
                            </g>
                        </g>
                    </svg>
                </li>
                <!-- 已收藏 -->
                <li v-show="musicPlay2.audioLove == 1">
                    <svg height="20px" width="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
                        <path style="fill:#FF7855;" d="M139.13,8.348C62.29,8.348,0,70.639,0,147.478c0,33.479,11.828,64.194,31.529,88.201L256,503.652
	l33.391-215.841L256,71.969C231.214,33.685,188.133,8.348,139.13,8.348z" />
                        <path style="fill:#FF562B;" d="M372.87,8.348c-49.003,0-92.083,25.336-116.87,63.62v431.684L480.471,235.68
	C500.172,211.673,512,180.959,512,147.478C512,70.639,449.71,8.348,372.87,8.348z" />
                    </svg>
                </li>
                <!-- 下载 -->
                <li>
                    <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M20 15V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18L4 15M8 11L12 15M12 15L16 11M12 15V3"
                            stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </li>
                <li>
                    <svg width="20px" height="20px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        class="commentSvg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="icomoon-ignore">
                        </g>
                        <path
                            d="M26.664 4.82h-21.328c-1.178 0-2.132 0.955-2.132 2.133v13.868c0 1.178 0.955 2.133 2.132 2.133h14.968l4.226 4.226v-4.226h2.134c1.178 0 2.133-0.955 2.133-2.133v-13.868c-0-1.178-0.955-2.133-2.133-2.133zM27.73 20.821c0 0.588-0.479 1.066-1.066 1.066h-3.2v2.718l-2.718-2.718h-15.41c-0.588 0-1.066-0.478-1.066-1.066v-13.868c0-0.588 0.479-1.066 1.066-1.066h21.328c0.588 0 1.066 0.478 1.066 1.066v13.868z"
                            fill="#000000">

                        </path>
                        <path
                            d="M16 12.824c-0.589 0-1.066 0.478-1.066 1.066s0.477 1.066 1.066 1.066 1.066-0.477 1.066-1.066c0-0.588-0.477-1.066-1.066-1.066z"
                            fill="#000000">

                        </path>
                        <path
                            d="M20.265 12.824c-0.589 0-1.066 0.478-1.066 1.066s0.477 1.066 1.066 1.066 1.066-0.477 1.066-1.066c0-0.588-0.477-1.066-1.066-1.066z"
                            fill="#000000">

                        </path>
                        <path
                            d="M11.835 12.824c-0.589 0-1.066 0.478-1.066 1.066s0.477 1.066 1.066 1.066 1.066-0.477 1.066-1.066c0-0.588-0.477-1.066-1.066-1.066z"
                            fill="#000000">
                        </path>
                    </svg>
                    <p class="comment">
                        100
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { lyric2, musicPlay2 } from '@/utils/playMusic';

const getAllLyric = async () => {
    lyric2.hiddenLyric = !lyric2.hiddenLyric
    await lyric2.getLryic()
}
</script>

<style lang="scss" scoped>
.songDetail {
    display: flex;
    flex-direction: row;
    align-items: center;

    .songImg {
        img {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            cursor: pointer;
        }
    }

    .songDetail2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        // justify-content: space-around;
        height: 100%;
        margin-left: 15px;

        .songtitle {
            height: 20px;
            max-width: 230px;
            width: 100%;
            // background-color: aquamarine;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        ul {
            margin-top: 5px;
            // background-color: aquamarine;
            width: 150px;
            display: flex;
            line-height: 100%;

            li {
                margin-right: 10px;
                cursor: pointer;

                .commentSvg {
                    position: absolute;
                }

                .comment {
                    font-size: 8px;
                    font-weight: 600;
                    top: -5px;
                    left: 10px;

                    position: relative;
                }
            }
        }
    }
}



.loveSvg {
    display: none;
}
</style>